<template>
	<view class="currentPage">
		<view class="title">
			<view class="font">渐</view>
			<view class="font">无</view>
			<view class="font">书</view>
			<view class="line"></view>
		</view>
		<view class="sun">
			<image src="/static/img/sun.png" mode=""></image>
		</view>
		<view class="ten">
			<image src="/static/img/ten1.png" mode=""></image>
		</view>
		<view class="img">
			<!-- <image src="/static/img/window.png" mode=""></image> -->
		</view>
		<view class="sd">
			<image src="/static/img/sd.png" mode=""></image>
		</view>
		<view class="bj">
			<image src="/static/img/bj.png" mode=""></image>
		</view>
		<view class="mask"></view>
		<view class="btn">
			<button @tap='btnClick(1)' :style="[btn1]">登录</button>
			<button @tap='btnClick(2)' :style="[btn2]">注册</button>
		</view>
		<view class="login" :style="[login]">
			<input type="text" value="" class="account" v-model="form.user" :placeholder="placeholder1" maxlength="25"
				@focus="inputFocus('login',1)" @blur="inputBlur('login',1)"
				@keyboardheightchange='onKeyboardheightchange' :auto-blur='autoBlur("input")'
				:adjust-position='false' />
			<input type="password" value="" class="password" v-model="form.password" :placeholder="placeholder2"
				maxlength="16" @focus="inputFocus('login',2)" @blur="inputBlur('login',2)" :adjust-position='false'
				@keyboardheightchange='onKeyboardheightchange' :auto-blur='autoBlur("input")' />
			<view class="login-btn" :style="[loginBtn]" @tap='toLogin'>
				登录
			</view>
			<navigator style="text-align: center;font-size: 28rpx;margin: 20rpx;" url="../forgetPass/forgetPass">忘记密码？
			</navigator>
		</view>
		<view class="register login" :style="[register]">
			<input type="text" value="" class="account" v-model="form.user" :placeholder="placeholder1" maxlength="25"
				@focus="()=>{placeholder1=''}" @blur="()=>{placeholder1='用户名/邮箱'}" :adjust-position='false'
				@keyboardheightchange='onKeyboardheightchange' />
			<input type="text" value="" class="account" v-model="form.password" :placeholder="placeholder2"
				maxlength="25" @focus="()=>{placeholder2=''}" @blur="()=>{placeholder2 ='设置密码'}"
				:adjust-position='false' @keyboardheightchange='onKeyboardheightchange' />
			<input type="password" value="" class="password" v-model="form.verifyCode" :placeholder="placeholder3"
				maxlength="16" @focus="()=>{placeholder3=''}" @blur="()=>{placeholder3 ='输入验证码'}"
				:adjust-position='false' @keyboardheightchange='onKeyboardheightchange' />
			<view class="login-btn" @tap='clickRegister'>
				{{registerText}}
			</view>
		</view>
		<u-toast ref="uToast" />
	</view>
</template>

<script>
	import md5 from "../../js/md5.js";

	export default {
		data() {
			return {
				registerText: '发送验证码',
				btn1: {
					top: '80rpx',
					left: '',
					right: '',
					transform: ''
				},
				btn2: {
					top: '240rpx',
					left: '',
					right: '',
					transform: ''
				},
				login: {
					"z-index": -1,
					width: 0,
					bottom: 0
				},
				register: {
					"z-index": -1,
					bottom: "-100%"
				},
				placeholder1: "用户名/邮箱",
				placeholder2: "输入密码",
				placeholder3: "输入验证码",
				form: {
					user: "1358503971@qq.com",
					password: "1",
					verifyCode: '',
				},
				tap: 0,
				showLogin: false,
				loginBtn: {
					"z-index": -1,
					margin: "0 300rpx",
					display: 'none',

				},
				keyBoardHeight: 0,
				timer: null,
				sendFlag: false
			}
		},
		computed: {},
		onLoad(e) {
			this.$nextTick(() => {
				if (e.f === '1') {
					this.btnClick(1)
					this.form.user = e.user
				}
			})
		},
		watch: {
			user: {
				handler(val) {
					this.showBtn()
				},
				immediate: true
			},
			password: {
				handler(val) {
					this.showBtn()
				},
				immediate: true
			}
		},
		onBackPress(e) {
			if (this.tap == 1) {
				this.btn1.top = '80rpx'
				this.btn2.top = '240rpx'
				this.login['z-index'] = -1
				this.login.width = 0
			} else {
				this.btn1.transform = 'translateX(50%)'
				this.btn2.transform = 'translateX(50%)'
				this.register['z-index'] = -1
				this.register.bottom = "-100%"

			}
			if (this.tap != 0) {
				this.tap = 0
				return true
			}
		},
		methods: {
			clickRegister() {
				let requird = {
					user: '用户名',
					password: '密码',
					verifyCode: '验证码'
				}
				for (let key in this.form) {
					if (!this.form[key] && key != 'verifyCode' && this.registerText === '发送验证码') {
						return uni.showToast({
							title: `请输入${requird[key]}`,
							icon: 'none'
						})
					}
				}

				if (!this.sendFlag) {
					this.$api.verify_code({
						mail: this.form.user
					}).then(res => {
						console.log('验证码获取结果', res)
						if (res.code === 1) {
							this.sendFlag = true
							uni.showToast({
								title: '验证码已发送，请注意查收',
								icon: 'none'
							})
							this.registerText = '点击注册'
						} else {
							uni.showToast({
								title: res.msg,
								icon: 'none'
							})
						}
					})
				} else {
					this.$api.register(this.form).then(res => {
						console.log('注册结果', res)
						this.sendFlag = true
						if (res.data.code === 1) {
							uni.showToast({
								title: res.data.msg,
								icon: 'none'
							})
						} else {
							uni.showToast({
								title: res.data.msg,
								icon: 'none'
							})
						}
					})
				}

			},
			showBtn(val) {
				if (val != "" && this.password != "") {
					this.loginBtn.display = 'block'
					setTimeout(() => {
						this.loginBtn.margin = "0 100rpx"
					}, 100)

				} else {
					this.loginBtn.margin = "0 300rpx"
					setTimeout(() => {
						this.loginBtn.display = 'none'
					}, 150)
				}
			},
			toLogin() {
				let requird = {
					user: '用户名',
					password: '密码'
				}
				for (let key in this.form) {
					if (!this.form[key] && key != 'verifyCode') {
						return uni.showToast({
							title: `请输入${requird[key]}`,
							icon: 'none'
						})
					}
				}
				uni.showLoading({
					title: '登录中',
				})

				this.$api.login(this.form).then(res => {
					uni.hideLoading()
					console.log('登录页结果', res)
					if (res.code === 1) {
						uni.setStorageSync('token', res.data.token)
						uni.setStorageSync('reToken', res.data.refreshToken)
						this.$initSocket(res.data.userInfo.id)
						setTimeout(() => {
							uni.switchTab({
								url: `/pages/index/index`,
							})
						}, 500)
					} else {
						uni.showToast({
							title: res.msg,
							icon: 'none'
						})

					}

				})

			},
			autoBlur: function(val) {
				if (val === 'input') {
					return false
				} else {
					return true
				}
			},
			onKeyboardheightchange(e) {

				if (this.timer != null) {
					clearTimeout(this.timer)
				}
				this.timer = setTimeout(() => {
					this.keyBoardHeight = e.detail.height
					// if (e.detail.height == 0) {
					// 	console.log('归零')
					// 	this.login.bottom = 0
					// 	this.register.bottom = 0
					// }

				}, 300)
				// console.log(e)
				// if (this.tap === 1) {
				// 	if (e.detail.height < 100) {
				// 		this.login.bottom = 0
				// 		return
				// 	}

				// 	this.login.bottom = e.detail.height + (550 - e.detail.height) + 'rpx'

				// }
				// if (this.tap === 2) {
				// 	if (e.detail.height < 100) {
				// 		this.register.bottom = 0
				// 		return
				// 	}
				// 	this.register.bottom = e.detail.height + (550 - e.detail.height) + 'rpx'
				// }
			},
			inputBlur() {
				console.log('失去焦点了')
				this.login.bottom = 0
				this.register.bottom = 0
			},
			async inputFocus(type, index) {
				console.log(this.keyBoardHeight)
				console.log(type, index)
				if (type === 'login') {
					console.log('聚焦', index)
					// await this.
					this.login.bottom = this.keyBoardHeight + 'rpx'
				}
			},
			btnClick(f) {
				if (f == 1) {
					// uni.navigateTo({
					// 	url:'../login/login'
					// })
					this.tap = f
					this.btn1.top = '-160rpx'
					this.btn2.top = '550rpx'
					this.login['z-index'] = 10
					this.login.width = '100%'
				} else {
					this.tap = 2
					this.btn1.transform = 'translateX(-100%)'
					this.btn2.transform = 'translateX(200%)'
					this.register['z-index'] = 10
					this.register.bottom = 0
					// uni.navigateTo({
					// 	url:'../register/register'
					// })
				}
				return true

			}
		}
	}
</script>

<style scoped lang="scss">
	.currentPage {
		height: 100vh;
		// border: 5px solid red;
		position: relative;
		overflow: hidden;
		background-color: #FFFFFF;
	}

	.title {
		font-size: 60rpx;
		padding-top: 50rpx;
		text-align: center;
		// border: 10px solid;
		font-family: 'Times New Roman', Times, serif;
		position: relative;

		// top: 50rpx;
		// left: 0;
		// right: 0;
		.font {
			margin: 60rpx 0;
			position: relative;
			z-index: 5;
		}

		.line {
			width: 400rpx;
			height: 1px;
			background-color: rgb(197, 155, 158);
			position: absolute;
			bottom: 50rpx;
			right: -50rpx;
		}
	}

	.img {
		border: 1px solid;
		position: absolute;
		// width: 750rpx;
		bottom: 0;
		transform: translateY(-75%);
		left: 0;

		image {
			width: 1000rpx;
			height: 500rpx;
			// border: 1px solid;
		}
	}

	.bj {
		// border: 1px solid;
		border-bottom: 1px solid rgb(197, 155, 158);
		position: absolute;
		bottom: 0;
		left: -30rpx;

		// transform: translateY(-75%) ;
		image {
			width: 400rpx;
		}
	}

	.sd {
		// border: 1px solid;
		position: absolute;
		right: -40rpx;

		image {
			width: 130rpx;
			height: 120rpx;
			transform: rotateZ(-30deg);
		}
	}

	.mask {
		width: 100%;
		height: 550rpx;
		// border: 1px solid;
		// position: absolute;
		background: #FFFFFF;
		// bottom: 0;
		opacity: .6;
		z-index: 2;
		// -webkit-filter: blur(12px);
		// -moz-filter: blur(12px);
		// -ms-filter: blur(12px);
		// -o-filter: blur(12px);
		// filter: blur(12px);
	}

	.btn {
		position: absolute;
		top: 35%;
		z-index: 5;
		width: 100%;
		height: 550rpx;
		opacity: .8;
		overflow: hidden;

		// border: 1px solid;
		// text-align: center;
		button {
			border: none;
			outline: none;
			opacity: .8;
			border-radius: 50rpx;
			// margin: 80rpx 0;
			color: #fff;
			width: 50%;
			position: absolute;
			transform: translateX(50%);
			transition: all .2s linear;
			background-image: linear-gradient(to right, #59cf5d 0%, #f9f96d 100%);
		}

		.btn1 {}

		.btn2 {}
	}

	.sun {
		position: absolute;
		top: -100rpx;
		left: -120rpx;

		image {
			height: 300rpx;
			width: 300rpx;
			animation: sun 10s infinite linear;
			transition: all 10s linear;
		}
	}

	.ten {
		position: absolute;
		transform: rotateZ(40deg);
		top: -130rpx;
		right: -40rpx;

		image {
			height: 700rpx;
			width: 300rpx;
		}
	}

	.login {
		position: absolute;
		// bottom: 0;
		top: 38%;
		height: 550rpx;
		// border: 5px solid;
		// z-index: 10;
		transition: all .2s linear;

		.account,
		.password {
			text-align: center;
			padding: 24rpx;
			border: 1px solid rgba(126, 181, 109, .6);
			font-size: 32rpx;
			// border: none;
			outline: none;
			margin: 40rpx 100rpx;
			border-radius: 50rpx;
			// background-color: rgba(245, 176, 157, .1);
		}

		.login-btn {
			border: 1px solid;
			text-align: center;
			padding: 20rpx 0;
			margin: 0 100rpx;
			overflow: hidden;
			font-size: 32rpx;
			color: #FFFFFF;
			border: 1px solid rgba(126, 181, 109, .6);
			background-image: linear-gradient(to right, #59cf5d 0%, #f9f96d 100%);
			border-radius: 50rpx;
			transition: all .25s linear;

		}
	}

	.register {
		position: absolute;
		// bottom: 0;
		top: 38%;
		height: 550rpx;
		width: 100%;
		// border: 5px solid;
		// z-index: 10;
		transition: all .3s linear;

		// border: 1px solid;
		.account,
		.password {
			text-align: center;
			padding: 24rpx;
			border: 1px solid rgba(126, 181, 109, .6);
			font-size: 32rpx;
			// border: none;
			outline: none;
			margin: 40rpx 100rpx;
			border-radius: 50rpx;
			// background-color: rgba(245, 176, 157, .1);
		}
	}

	@keyframes sun {
		0% {
			transform: scale(.8) rotateZ(0deg);
		}

		50% {
			transform: scale(1.5) rotateZ(360deg);
		}

		100% {
			transform: scale(.8) rotateZ(720deg);
		}
	}
</style>
